<template>
    <div>
        <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-cell-group>
            <van-cell title="账号" :value="nickname" :to="{name:'ANnickname'}" v-if="false">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                    <van-icon name="arrow" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="手机号" :value="nowphone" :to="{name:'ANphone',query:{nowphone}}">
                <template #right-icon>
                    <van-icon name="arrow" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="密码" value="已设置" @click="changepassword">
                <template #right-icon>
                    <van-icon name="arrow" class="search-icon" />
                </template>
            </van-cell>
        </van-cell-group>

        <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
            <van-nav-bar title="设置密码" left-text="取消" left-arrow @click-left="onClickpopupLeft" />
            <div class="text">
                <p>更换手机号，下次登录可以使用新的手机号登录。当前手机号:</p>
                <p>{{nowphone}}</p>
            </div>
            <van-form @submit="verify">
                <van-cell-group>
                    <van-field v-model="oldpassword" label="旧密码" placeholder="请填写旧密码" :rules="verifyoldpassword" />
                    <van-field v-model="password" label="新密码" placeholder="请输入新的密码"
                        :rules="[{ validator: verifypassword, message: '请输入8-16位字母加数字' }]" />
                    <van-field v-model="password2" label="确认密码" placeholder="请再次输入新密码"
                        :rules="[{ validator: verifypassword2, message: '两次输入密码不一致' }]" />
                </van-cell-group>
                <div class="text">
                    <p>密码必须是8-16位英文字母、数字组合(不能是纯数字)</p>
                </div>
                <div>
                    <van-button class=green native-type="submit">
                        确定
                    </van-button>
                </div>
            </van-form>
        </van-popup>
        <van-button class=green @click="dropOut">
            退出登录
        </van-button>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            nowphone:"",
            nickname: "123",
            show: false,
            oldpassword: "",
            password: "",
            password2: "",
            btn: false,
            verifyoldpassword: [
                {
                    validator: async value => {
                        let rst = await this.$frontaxios.post(this.$front.postVerifyPassword, {oldpassword:value});
                        if (rst.code == 1) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                    message: "密码错误",
                    trigger: "onBlur"
                }
            ]
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onClickpopupLeft() {
            this.show = false
        },
        changepassword() {
            this.show = true
        },
        verifypassword(val) {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
        },
        verifypassword2(val) {
            return new Promise((resolve) => {
                resolve(this.password == val);
            });
        },
        async verify() {
            let res=await this.$frontaxios.post(this.$front.postPassword,{oldpassword:this.oldpassword,password:this.password});
            if(res.code==1){
                  this.$router.push({name:'my'})
                    Cookies.remove("fronttoken");
                    Cookies.remove("frontrefreshtoken"); 
                    localStorage.clear();
                    sessionStorage.clear();
                    this.$toast.success('密码修改成功');
                  ;  
            }else{
                  this.$toast.fail('密码修改失败');
            }
        },
        dropOut() {
            this.$dialog.confirm({
                title: '确定退出吗',
                message: '将需要重新登录',
            })
                .then(() => {
                    Cookies.remove("fronttoken");
                    Cookies.remove("frontrefreshtoken"); 
                    localStorage.clear();
                    sessionStorage.clear();
                    this.$router.push({name:"my"})
                })
        }
    },
    async created(){
    
        let res=await this.$frontaxios.get(this.$front.getNowPhone);
        if(res.code==1){
            this.nowphone=res.data;
        }
    }
}
</script>
<style  scoped>
.search-icon {
    font-size: 16px;
    line-height: inherit;
    color: rgb(201, 197, 197);
    margin-left: 0.5rem;
}

.text {
    font-size: 1px;
    padding: 1rem;
    color: #C8C9CC;
}

.van-button {
    width: 8rem;
    border-radius: 0.5rem;
    position: fixed;
    bottom: 5rem;
    left: 35%;
}

/* .gray {
    background-color: #F2F2F2;
} */

.green {
    background-color: #07C160;
    color: #FFF;

}
</style>
